<template>
	<view class="page">
		<u-sticky :offsetTop="0">
			<view class="head-tabs">
				<view class="tabs-wrap">
					<u-tabs :current="tabCurrent" :scrollable="false" :list="tabList" keyName="title" lineColor="#CB0011"
						:lineWidth="28" :lineHeight="2" @click="tabClick"
						:itemStyle="{height: '50px',fontSize: '28rpx',color:'#B3B9C9'}"
						:activeStyle="{fontWeight: 'bold',color: '#000000' }" :inactiveStyle="{}"></u-tabs>
				</view>
			</view>
		</u-sticky>


		<view class="page-ctx">
			<view class="view-wrap">
				<view class="order-view">
					<view class="order-wrap">
						<view class="order-list">
							<view class="item" v-for="(item,index) in orders" :key="index">

								<view class="item-top flex-between">
									<text class="order-sn">订单号：{{item.orderNo}}</text>
									<text class="status">{{item.statusInfo}}</text>
								</view>

								<view class="item-center">
									<view class="products-wrap">
										<view class="product-list">
											<view class="product-item flex" v-for="(product,index) in item.products" :key="index">
												<view class="poster-box">
													<image :src="product.image" mode="aspectFill"></image>
												</view>
												<view class="info">
													<view class="title-box">
														<view class="title">
															{{product.title}}
														</view>
													</view>
													<view class="desc-box">
														<view class="desc ellipsis-1">
															{{product.keyVals }}
														</view>
													</view>
													<view class="price-box flex-between">
														<view class="price-info">
															<text class="price">{{product.jifen || 0}}积分</text>
															<!-- <text class="huobi" style="font-size: 28rpx;">积分</text> -->
															<text class="unit" v-if="product.unit">/{{product.unit}}</text>
														</view>
														<text class="num">x {{product.num}}</text>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="item-bottom ">
									<view class="total-box ">
										<view class="price">
											实付款：{{item.jifen}} 积分
										</view>
									</view>
									<view class="btns flex">
										<view class="btn fit-text btn-detail" @click="toDetail(item)">
											订单详情
										</view>
										<!-- 	<view v-if="item.is_allow_cancel" class="btn fit-text btn-cancel" @click="doCancel(item)">
											取消订单
										</view> -->
										<!-- 			<view v-if="item.is_allow_pay" class="btn fit-text btn-pay" @click="doPay(item)">
											去支付
										</view> -->
										<!-- 		<view v-if="item.is_allow_delete" class="btn fit-text" @click="doDelete(item)">
											删除订单
										</view> -->
										<view v-if="item.is_allow_receive" class="btn fit-text btn-pay" @click="doReceive(item)">
											确认收货
										</view>
									</view>
								</view>
							</view>
						</view>

						<view class="load-more-wrap" style="margin-top: 40rpx;">
							<u-loadmore :status="loadmore_status" />
						</view>

					</view>
				</view>
			</view>
		</view>

		<w_bottom_safe height="40" />
		<order_receive_pop data-title="订单确认收货" ref="order_receive_pop" @confirm="confrimReceive" />
	</view>
</template>

<script>
	import order_receive_pop from '@/components/order/order_receive_pop.vue'
	export default {
		components: {
			order_receive_pop,
		},
		data() {
			return {
				show_refund: false, //订单 售后切换
				//
				orders: [],
				order_select: {}, //
				count: 0,
				pagination: {
					page: 1,
					pageNum: 10
				},
				loadmore_status: 'loadmore', //loadmore  / loading / nomore

				statusNameMap: {
					'-5': "待付款", //已取消
					'-5_2': "订单已取消", //已取消
					2: "待发货",
					3: "待收货",
					4: "已完成",
					'-1': "无效",
				},

				tabCurrent: 0,
				tabSelect: {
					title: '全部',
					value: 0,
				},
				tabList: [{
						title: '全部',
						value: 0,
					},
					{
						title: '待发货',
						value: 2,
					},
					{
						title: '待收货',
						value: 3,
					},
					{
						title: '待评价',
						value: 6,
					},
					{
						title: '已完成',
						value: 5
					},
				],

			}
		},

		computed: {

		},
		onLoad(option) {
			// console.log('option', option)
			// if (option.status) {
			// 	this.tabSelect = this.tabList.find(v => v.value == option.status)
			// 	this.tabCurrent = this.tabList.findIndex(v => v.value == option.status)
			// }
		},
		onShow() {
			this.initQuery();
			this.setView();
		},
		onHide() {},
		onPullDownRefresh() {

		},
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			loadMore() {
				if (this.loadmore_status == 'loadmore') {
					this.loadmore_status = 'loading'
					this.pagination.page++;
					this.query_order();
				}
			},
			initQuery() {
				this.orders = [];
				this.pagination.page = 1;
				this.loadmore_status = 'loadmore'
			},
			setView() {
				this.query_order()
			},

			query_order() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'orders_lists',
						...this.pagination,
						scene: this.tabSelect.value, //0全部 1待支付 2待发货 3待收货 4待评价 5已评价 -1无效
						type: 1, //订单类型：0-全部 1-积分订单 2-商城订单
					},
				}).then(res => {
					if (res.code == 200) {
						this.count = res.data.count;
						let list = res.data.list
	
							this.format_order_view_info(list)
						this.orders = this.orders.concat(list);
						this.loadmore_status = this.count > this.orders.length ? 'loadmore' : 'nomore';
					}
				})
			},
			format_order_view_info(list) {
				list.forEach(v => {
					let jifen = 0;
					v.products.forEach(product => {
						jifen += product.jifen * product.num
					})
					v.jifen = jifen;
				})
			},


			tabClick(e) {
				this.$log('tab e', e)

				this.tabSelect = e
				this.initQuery();
				this.setView();
			},

			toDetail(item) {
				this.toRoute({
					path: '/points-order-detail',
					query: {
						id: item.id,
					}
				})
			},

			doReceive(item) {
				this.order_select = item
				this.$refs.order_receive_pop.init(item)
			},
			//确认取消订单
			confrimReceive() {
				this.showLoading()
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'orders_shouhuo',
						orderId: this.order_select.id
					},
				}).then(res => {
					this.hideLoading()
					this.$alert(res)
					if (res.code == 200) {
						// this.setView();
						this.changeOrderStatus(4)
					}
				})
			},

			doReview(item) {

			},
			doRefund(item) {

			},


			// 下列操作后需要改变订单状态码 并更新列表的订单按钮操作
			//取消订单
			//支付订单
			//订单售后
			//确认收货等操作后
			changeOrderStatus(status) {
				let item = this.order_select;
				let index = this.orders.findIndex(v => v.id == item.id)
				//全部订单切换状态  其它隐藏
				if (this.tabSelect.value == 0) { //全部
					item.status = status

					if (item.status == -5) {
						item.status_info = '订单已取消'; // 待支付  -> 订单已取消
					}
					this.format_order_view_info([item])
					this.orders.splice(index, 1, item)
				} else {
					this.orders.splice(index, 1)
				}
			},

		}
	}
</script>




<style lang="scss">
	page {
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	// ::v-deep .tabs-wrap .u-tabs__wrapper__nav__item {
	// 	padding: 0 8rpx;
	// }
	.page {}

	.page-ctx {
		padding: 24rpx 32rpx;
	}

	.head-tabs {
		// position: fixed;
		// z-index: 10;
		// top: 0;
		// left: 0;
		// right: 0;
		background: #fff;
	}


	.tabs-wrap {
		padding-top: 0;
		box-shadow: 0rpx -10rpx 10rpx 1rpx rgba(0, 0, 0, 0.08);
		background: #F6F6F6;
		background: #FFF;
		border-bottom: 1rpx solid #eee;


		.tabs {
			.tab-item {
				height: 100rpx;
				line-height: 100rpx;
				position: relative;
				// padding: 25rpx 0;
				text-align: center;
				flex: 1;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;

				&.active {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #222222;


					&::after {
						content: '';

						position: absolute;
						z-index: 2;
						bottom: 0;
						left: 50%;
						transform: translate(-50%);
						width: 40rpx;
						height: 6rpx;
						background: #44C4BE;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
					}
				}
			}
		}
	}





	// 退款订单
	.order-wrap {
		.order-list {
			.item {
				margin-bottom: 24rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				padding: 32rpx 24rpx;
				margin-bottom: 20rpx;
				background: #FFFFFF;


				.item-top {
					padding: 0 0;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;

					.order-sn {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #B3B9C9;
					}

					.status {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FF0000;
					}
				}

				.item-center {
					// border-top: 1rpx solid #eee;
				}

				.item-bottom {
					// border-top: 1rpx solid #eee;
					// padding: 20rpx 0;


					.total-box {
						text-align: right;

						.price {
							text-align: right;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
						}
					}

					.btns {
						margin-top: 30rpx;
						flex: 1;
						justify-content: flex-end;
						overflow: hidden;
						flex-wrap: wrap;

						.btn {
							margin-left: 20rpx;
							padding: 0 24rpx;
							min-width: 146rpx;
							height: 64rpx;
							background: #F8F8F8;
							border-radius: 40rpx 40rpx 40rpx 40rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #333333;

							&.btn-detail {}

							&.btn-pay {
								background: #CB0011;
								color: #FFFFFF;
							}

							&.btn-reviews {}

							&.btn-cancel {}
						}
					}
				}
			}
		}



		.products-wrap {
			padding: 0 0;

			.product-list {
				.product-item {
					padding: 32rpx 0;

					&+.product-item {
						border-top: 1rpx solid #eee;
					}

					.poster-box {
						width: 176rpx;
						height: 176rpx;
						border-radius: 8rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.info {
						flex: 1;
						overflow: hidden;
						padding-left: 32rpx;



						.title-box {}

						.title {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #222222;
							line-height: 1.5;
						}

						.desc-box {
							margin-top: 14rpx;

							.desc {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #B3B9C9;
							}
						}


						.price-box {
							margin-top: 24rpx;

							.price-info {
								.huobi {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 20rpx;
									color: #000000;
								}

								.price {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 28rpx;
									color: #000000;
								}

								.unit {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 20rpx;
									color: #000000;
								}
							}

							.num {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 24rpx;
								color: #000000;
							}

						}
					}
				}

			}

		}
	}
</style>